<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jSlider</title>
<style>
*{margin:0px; padding:0px;}
.slider {width:600px; height:350px; margin:50px auto; position:relative;}
.slider > div {display:none;}
a.next, a.prev {color:#000; background-color:#eee; border:1px solid #fff; outline:1px solid #ccc; text-shadow:-1px -1px 0px #fff; text-decoration:none; z-index:99; padding:0px 5px; display:block; }
.next {position:absolute; right:-10px; top:50%;}
.prev {position:absolute; left:-10px; top:50%;}
a.inactive {color:#ccc; background-color:#fff; border:1px solid #eee; outline:none;}
ul.navi {list-style:none; position:absolute; bottom:10px; right:5px;}
ul.navi li {float:left; margin-right:5px;}
ul.navi li a {background-color:#CCC; display:block; height:10px; width:10px; text-indent:-9999px; outline:none; -moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow:  0px 0px 2px  #000000;
-moz-box-shadow: 0px 0px 3px #000000;
box-shadow: 0px 0px 1px #000000; }
ul.navi li a.active {background-color:#fff;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="custom_animations.js"></script>
<script src="custom_easing.js"></script>
<script src="jSlider.js"></script>
<script>
$(document).ready(function(){

	$(".slider").jSlider({elem:"div",images:true, animation: "random",auto_slide: true, auto_slide_interval:4000, infinite: true, speed: 1200});

});
</script>
</head>

<body>
<!-- the slider content holder -->
<div class="slider">
	<!-- the elements inside the slider, have as many as you want -->
	<div><a href="#"><img src="slider_01.jpg" width="600" height="350" border="0" /></a></div>
	<div><a href="#"><img src="slide_02.jpg" width="600" height="350" border="0" /></a></div>
	<div><a href="#"><img src="slide_03.jpg" width="600" height="350" border="0" /></a></div>
	
    <!-- the navigation can be placed ANYWHERE in your document -->
    <a href="#" class="next">&rarr;</a>
    <a href="#" class="prev">&larr;</a>

</div><!-- slider -->
</body>
</html>
